<template>
	<view>
		<view id="map" :mapData="mapData" :change:mapData="map.dataChange"></view>
	</view>
</template>


<script>
	export default {
		name: 'Map',
		data() {
			return {
				mapData: null,
			}
		},
		methods: {
			init(kaoqinInfo, userPost) {
				this.mapData = {
					kaoqinInfo,
					userPost
				}
			},
		},
	}
</script>
<script module="map" lang="renderjs">
	// 添加高德安全密钥（不加无法定位）
	window._AMapSecurityConfig = {
		securityJsCode: "6a3b0ae034d75c523abf64e1a334791e"
	};
	import AMapLoader from "@amap/amap-jsapi-loader"

	export default {
		data() {
			return {
				map: null,
			}
		},
		methods: {
			dataChange(newValue, oldValue, ownerVm, vm) {
				console.log('oldValue',oldValue)
				console.log('newValue',newValue)
			},
			initMap(kaoqinInfo, userPost) {
				console.log(kaoqinInfo)
				console.log(userPost)
				const that = this;
				AMapLoader.load({
						key: "c9c069d05cb4075e3e24aefea6f77b85", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
					})
					.then((AMap) => {
						that.map = new AMap.Map("map", {
							// 设置地图容器id
							viewMode: "3D", // 是否为3D地图模式
							zoom: 6, // 初始化地图级别
							center: [userPost.long, userPost.lat], // 初始化地图中心点位置 当前人所在位置
						});

						// 打卡区域
						//创建圆形点标记  实例
						var circle = new AMap.Circle({
						  center: [kaoqinInfo.long, kaoqinInfo.lat], //圆心 打卡中心点
						  radius: kaoqinInfo.range, //半径
						  fillOpacity: 0.1, //圆形填充透明度
						  strokeDasharray: [10, 10],
						  fillColor: "#1791fc", //圆形填充颜色
						  zIndex: 50, //圆形的叠加顺序
						});
						
						//圆形 Circle 对象添加到 Map
						that.map.add(circle);
						//根据覆盖物范围调整视野
						that.map.setFitView([ circle ])
						
						// 打卡人当前所在点
						//创建 AMap.Icon 实例：
						const icon = new AMap.Icon({
						  size: new AMap.Size(25, 34), //图标尺寸
						  image: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png', //Icon 的图像
							imageOffset: new AMap.Pixel(0, 0),
						  imageSize: new AMap.Size(15, 20), //根据所设置的大小拉伸或压缩图片
						});
						// 将 Icon 实例添加到 marker 上:
						const marker = new AMap.Marker({
						  position: new AMap.LngLat(userPost.long, userPost.lat), //点标记的位置 当前人所在位置
						  offset: new AMap.Pixel(-7, -20), //偏移量
						  icon: icon, //添加 Icon 实例
						  zooms: [5, 16], //点标记显示的层级范围，超过范围不显示
						});
						that.map.add(marker);
						
					})
					.catch((e) => {
						console.log(e);
					});
			}
		}
	}
</script>

<style>
	#map {
		width: 100vw;
		height: 64vh;
	}
</style>
